<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body>
    <div>
        <button type="button" id="addEngin" class="layui-btn">新增</button>
    </div>
    <div>
        <table id="demo" lay-filter="test"></table>
    </div>
</body>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/lay/modules/jquery.js}"></script>
<script th:inline="none">

    layui.use(['table','jquery','element'], function() {
        var table = layui.table;
        var $ = layui.jquery;
        var element = layui.element;
        let element1 = parent.layui.element;

        table.render({
            elem: '#demo'
            , url: '/test' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {type: 'numbers', title: '序号', width: 80, fixed: 'left',sort: true}
                , {field: 'name', title: '项目名称'}
                , {field: 'age', title: '当前进度',width: 150,sort: true}
                , {field: 'age', title: '紧急程度',width: 150,sort: true}
                , {field: 'age', title: '施工详情',templet: function (d) {
                        return `
                        <button lay-flag="porject" type="button" lay-id="survey" class="layui-btn layui-btn-primary layui-btn-xs" lay-msg="${d.age}">项目概况</button>
                        <button lay-flag="porject" type="button" lay-id="log" class="layui-btn layui-btn-primary layui-btn-xs" lay-msg="${d.age}">项目日志</button>
                        <button lay-flag="porject" type="button" lay-id="event" class="layui-btn layui-btn-primary layui-btn-xs" lay-msg="${d.age}">项目事件</button>
                        <button lay-flag="porject" type="button" lay-id="summary" class="layui-btn layui-btn-primary layui-btn-xs" lay-msg="${d.age}">项目总结</button>
                        `
                    }}
                , {field: 'age', title: '任务人员',width: 100}
                , {
                    title: '操作', width: 240, templet: function (d) {
                        return `
                        <button lay-name="user" type="button" id="edit" class="layui-btn layui-btn-xs" lay-msg="${d.age}">编辑</button>
                        <button lay-name="user1" type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-msg="${d.age}">删除</button>
                        `
                    }
                }
            ]]
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": 0, //解析接口状态
                    "msg": '数据获取失败', //解析提示文本
                    "count": res.length, //解析数据长度
                    "data": res //解析数据列表
                };
            }
        });

        $("#addEngin").click(function () {
            layer.open({
                type: 2,
                title: '新增',
                area: ['700px', '500px'],
                content: '/toLayer/engin/add/0',
                btn: ['提交','重置'],
                yes: function (index, layero) {
                    //按钮【按钮一】的回调
                    console.log(layero)
                    var body = layer.getChildFrame('body', index);
                    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    console.log(body) //得到iframe页的body内容
                    body.find('input').val('Hi，我是从父页来的')
                },
                btn2: function (index, layero) {
                    //按钮【按钮一】的回调
                    console.log(layero)
                },
            });
        })

        // 施工详情按钮点击
        $(document).on('click', 'button[lay-flag="porject"]', function () {
            if($(this).attr('lay-flag')=='menu'){
                return;
            }
            let id = $(this).attr('lay-id')
            //let title = $(this).text()
            let attr = $(this).attr("lay-msg");// 获取项目id
            let title = $(this).parent().parent().parent().children("td[data-field='name']").children().text()+"-"+$(this).text();
            //let content = `<iframe style="width: 100%; height: 830px;"  src="/toPage/engin/${id}" scrolling="no"  frameborder="0"></iframe>`
            let content = `<iframe style="width: 100%; height: 830px;"  src="/toLayer/engin/${id}/${attr}" scrolling="no"  frameborder="0"></iframe>`

            let tabArr = $(".layui-tab-title",window.parent.document).find('li');
            let flag = true;
            for (let i = 0; i < tabArr.length; i++) {
                if($(tabArr[i]).attr('lay-id')==id){
                    flag = false;
                }
            }

            if(flag){
                addTab(title,content,id)
            }

            element1.tabChange('demo', id);
        })


        // 添加tab栏
        function addTab(title,content,id){
            element1.tabAdd('demo', {
                title: ''+title
                ,content: ''+content //支持传入html
                ,id: ''+id
            });
        }
    })

</script>
</html>